<template>
    <tpl src="tpl/components/dialog.tpl" width="420" height="350" title="背包" :drag="drag" :visible="visible">
        <img src="res/ui/colorLight.png" width="400" x="10" y="90"></img>
        <img src="res/ui/colorLight.png" width="400" x="10" y="140"></img>
        <img src="res/ui/colorLight.png" width="400" x="10" y="190"></img>
        <img src="res/ui/colorLight.png" width="400" x="10" y="240"></img>
        <img src="res/ui/colorLight.png" width="400" x="10" y="290"></img>
        <img src="res/ui/colorLight.png" height="245" x="60" y="45"></img>
        <img src="res/ui/colorLight.png" height="245" x="110" y="45"></img>
        <img src="res/ui/colorLight.png" height="245" x="160" y="45"></img>
        <img src="res/ui/colorLight.png" height="245" x="210" y="45"></img>
        <img src="res/ui/colorLight.png" height="245" x="260" y="45"></img>
        <img src="res/ui/colorLight.png" height="245" x="310" y="45"></img>
        <img src="res/ui/colorLight.png" height="245" x="360" y="45"></img>
        <img src="res/ui/iconGold.png" x="30" y="295"></img>
        <img src="res/ui/ground3.png" x="80" y="300" width="180" height="30" grid="7,7,7,7">
            <txt text="888,888,888" x="8" y="5" size="16" color="#ffffff"></txt>
        </img>
        <tpl src="tpl/components/button.tpl" icon="res/ui/btnBlue.png" title="回收" x="280" y="300" width="80" height="32" grid="16,16,16,16" @click="test"></tpl>
        <img src="res/ui/iconMoney.png" width="40" height="40" x="15" y="45" @over="tipOn($event, 0)" @out="tipOut"></img>
        <img src="res/item/weapon.png" width="40" height="40" x="65" y="45" @over="tipOn($event, 1)" @out="tipOut"></img>
        <img src="res/ui/iconMoney.png" width="40" height="40" x="115" y="45"></img>
    </tpl>
</template>

<script>
data(){
    return {
        bagTitle: "",
        drag: {x: 0, y: 0, width: 420, height: 50},
        items: [
            {title: "元宝大礼包长长长长长长长长长长长长", desc: "使用后可获得100元宝"},
            {title: "裁决之杖", desc: "攻击: 100 - 3000\n幸运: +9\n等级: 30"}
        ]
    }
}

create() {
    console.log("bag create", this.width, this.height);
}

update(delta) {

}

destroyed() {
    
}

test(event){
    console.log("回收",event);
}

tipOn(event, itemIndex){
    tip.visible = true;
    this.tipX = tip.x = event.x + 1;
    this.tipY = tip.y = event.y + 1;
    tip.updateContent(this.items[itemIndex].title, this.items[itemIndex].desc);
}

tipOut(event){
    tip.visible = false;
}

</script>